@charset "UTF-8";
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        -o-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    html,
    body,
    div,
    span,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    abbr,
    address,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    samp,
    small,
    strong,
    sub,
    sup,
    var,
    b,
    i,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    dialog,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
    
    body {
        line-height: 1;
    }
    
    article,
    aside,
    dialog,
    figure,
    footer,
    header,
    hgroup,
    nav,
    section {
        display: block;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        font-weight: normal;
        font-size: 100%;
        text-align: left;
    }
    
    ol,
    ul,
    li,
    nav ul {
        list-style: none;
    }
    
    ul,
    li,
    img {
        margin: 0;
        padding: 0;
        list-style: none;
        vertical-align: bottom;
        line-height: 1.6;
        text-align: left;
    }
    
    caption,
    th {
        text-align: left;
    }
    
    address,
    caption,
    cite,
    code,
    dfn,
    em,
    strong,
    th,
    var {
        font-style: normal;
        font-weight: normal;
    }
    
    blockquote,
    q {
        quotes: none;
    }
    
    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }
    
    a {
        text-decoration: none;
        outline: 0;
        line-height: 1.6;
        /* Hides from IE-mac \*/
        overflow: hidden;
        /* End hide from IE-mac */
    }
    
    ins {
        background-color: #ff9;
        color: #000;
        text-decoration: none;
    }
    
    mark {
        background-color: #ff9;
        color: #000;
        font-style: italic;
        font-weight: bold;
    }
    
    del {
        text-decoration: line-through;
    }
    
    abbr[title],
    dfn[title] {
        border-bottom: 1px dotted #000;
        cursor: help;
    }
    
    img,
    td,
    th {
        border: 0;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    td,
    th {
        text-align: left;
        vertical-align: top;
    }
    
    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #cccccc;
        margin: 1em 0;
        padding: 0;
    }
    
    input,
    select {
        vertical-align: middle;
    }
    
    button {
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
    }
    /* CLEAR FIX*/
    
    .clearfix:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    .clearfix {
        display: inline-block;
    }
    
    * html .clearfix {
        height: 1%;
    }
    
    .clearfix {
        display: block;
    }
    /*$ff-base: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;*/
    /*********************************
 * HELPER
 *********************************/
    
     :root {
        --vw5: 5px;
        --vw10: 10px;
        --vw15: 15px;
        --vw20: 20px;
        --vw25: 25px;
        --vw30: 30px;
        --vw40: 40px;
        --vw50: 50px;
        --vw60: 60px;
        --vw80: 80px;
        --vw100: 100px;
        --vw120: 120px;
        --vw150: 150px;
        --vw200: 200px;
        /*@media screen and ( max-width: $base-width ) {
		--vw5:  0.5vw;
		--vw10: 1vw;
		--vw15: 1.5vw;
		--vw20: 2vw;
		--vw25: 2.5vw;
		--vw30: 3vw;
		--vw40: 4vw;
		--vw50: 5vw;
		--vw60: 6vw;
		--vw80: 8vw;
		--vw100: 10vw;
		--vw120: 12vw;
		--vw150: 15vw;
		--vw200: 20vw;
	}*/
    }
    
    @media screen and (max-width: 768px) {
         :root {
            --vw5: 0.7vw;
            --vw10: 1.3vw;
            --vw15: 2vw;
            --vw20: 2.6vw;
            --vw25: 3.3vw;
            --vw30: 3.9vw;
            --vw40: 5.2vw;
            --vw50: 6.5vw;
            --vw60: 7.8vw;
            --vw80: 10.4vw;
            --vw100: 13vw;
            --vw120: 15.6vw;
            --vw150: 19.5vw;
            --vw200: 26vw;
        }
    }
    
    .pc-view {
        display: block;
    }
    
    span.pc-view,
    strong.pc-view {
        display: inline;
    }
    
    th.pc-view,
    td.pc-view {
        display: table-cell;
    }
    
    @media screen and (max-width: 768px) {
        .pc-view {
            display: none;
        }
        span.pc-view,
        strong.pc-view {
            display: none;
        }
    }
    
    .tb-view {
        display: none;
    }
    
    @media screen and (max-width: 768px) {
        .tb-view {
            display: block;
        }
        span.tb-view,
        strong.tb-view {
            display: inline;
        }
        th.tb-view,
        td.tb-view {
            display: table-cell;
        }
    }
    
    @media screen and (max-width: 640px) {
        .tb-view {
            display: none;
        }
        span.tb-view,
        strong.tb-view {
            display: none;
        }
    }
    
    .sp-view {
        display: none;
    }
    
    @media screen and (max-width: 640px) {
        .sp-view {
            display: block;
        }
        span.sp-view,
        strong.sp-view {
            display: inline;
        }
        th.sp-view,
        td.sp-view {
            display: table-cell;
        }
    }
    
    .pc-view.tb-view {
        display: block;
    }
    
    @media screen and (max-width: 640px) {
        .pc-view.tb-view {
            display: none;
        }
    }
    
    .tb-view.sp-view {
        display: none;
    }
    
    @media screen and (max-width: 768px) {
        .tb-view.sp-view {
            display: block;
        }
        span.tb-view.sp-view,
        strong.tb-view.sp-view {
            display: inline;
        }
        th.tb-view.sp-view,
        td.tb-view.sp-view {
            display: table-cell;
        }
    }
    
    .fz10 {
        font-size: 10px;
        font-size: 1rem;
    }
    
    .fz12 {
        font-size: 12px;
        font-size: 1.2rem;
    }
    
    .fz14 {
        font-size: 14px;
        font-size: 1.4rem;
    }
    
    .fz16 {
        font-size: 16px;
        font-size: 1.6rem;
    }
    
    .fz18 {
        font-size: 18px;
        font-size: 1.8rem;
    }
    
    .fz20 {
        font-size: 20px;
        font-size: 2rem;
    }
    
    .fz22 {
        font-size: 22px;
        font-size: 2.2rem;
    }
    
    .fz24 {
        font-size: 24px;
        font-size: 2.4rem;
    }
    
    .fz26 {
        font-size: 26px;
        font-size: 2.6rem;
    }
    
    .fz28 {
        font-size: 28px;
        font-size: 2.8rem;
    }
    
    .fz30 {
        font-size: 30px;
        font-size: 3rem;
    }
    
    .fb {
        font-weight: bold;
    }
    
    .fn {
        font-weight: normal;
    }
    
    .c-white {
        color: #fff;
    }
    
    .c-black {
        color: #000;
    }
    
    .c-gray {
        color: #999;
    }
    
    .c-lightgray {
        color: #c8c8c8;
    }
    
    .c-blue {
        color: #004bc8;
    }
    
    .c-lightblue {
        color: #00aee7;
    }
    
    .c-green {
        color: #00a23a;
    }
    
    .c-pink {
        color: #ff7377;
    }
    
    .c-orange {
        color: #ff6400;
    }
    
    .c-red {
        color: #d0021b;
    }
    
    .c-purple {
        color: #d388b9;
    }
    
    .tL {
        text-align: left !important;
    }
    
    .tR {
        text-align: right !important;
    }
    
    .tC {
        text-align: center !important;
    }
    
    @media screen and (max-width: 640px) {
        .tLsp {
            text-align: left !important;
        }
        .tRsp {
            text-align: right !important;
        }
        .tCsp {
            text-align: center !important;
        }
    }
    
    .sup {
        font-size: 0.7em;
        vertical-align: top;
        position: relative;
        top: -0.1em;
    }
    
    .sub {
        font-size: 0.7em;
        vertical-align: bottom;
        position: relative;
        top: 0.1em;
    }
    
    .na {
        pointer-events: none;
        cursor: default;
        color: #333333;
        text-decoration: none !important;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    a img {
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        transition: 0.4s;
    }
    
    @media screen and (min-width: 769px) {
        a:hover img {
            opacity: 0.50;
            filter: alpha(opacity=50);
        }
    }
    
    .clear {
        clear: both !important;
    }
    
    .wrap {
        overflow: hidden;
        zoom: 1;
    }
    
    .fR {
        float: right !important;
    }
    
    .fL {
        float: left !important;
    }
    
    .aligncenter {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .alignleft {
        float: left;
        margin: 0.5em 1em 0.5em 0;
    }
    
    .alignright {
        float: right;
        margin: 0.5em 0 0.5em 1em;
    }
    
    @media screen and (max-width: 640px) {
        .fRsp,
        .fLsp {
            float: none !important;
            margin: 0 0 10px !important;
            text-align: center;
        }
        .alignright,
        .alignleft {
            display: block;
            float: none !important;
            margin: 0 auto 10px !important;
            text-align: center;
        }
    }
    
    .nbd {
        border: none;
    }
    
    .db {
        display: block;
    }
    
    .dib {
        letter-spacing: -0.5em;
    }
    
    .dib li {
        display: inline-block;
        vertical-align: top;
        letter-spacing: normal;
    }
    
    .btn {
        display: inline-block;
        cursor: pointer;
        min-width: 315px;
        padding: 15px 5px;
        color: #fff !important;
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        border: 2px solid #014F80;
        background: #014F80;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }
    
    @media screen and (min-width: 769px) {
        .btn:hover {
            color: #014F80 !important;
            text-decoration: none;
            background: #fff;
        }
    }
    
    @media screen and (max-width: 640px) {
        .btn {
            min-width: 280px;
        }
    }
    
    .btn-block {
        display: block;
        cursor: pointer;
        min-width: 315px;
        padding: 15px 5px;
        color: #fff !important;
        font-size: 16px;
        font-size: 1.6rem;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        border: 2px solid #014F80;
        background: #014F80;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }
    
    @media screen and (min-width: 769px) {
        .btn-block:hover {
            color: #014F80 !important;
            text-decoration: none;
            background: #fff;
        }
    }
    
    @media screen and (max-width: 640px) {
        .btn-block {
            min-width: 280px;
        }
    }
    
    .btn-reverse {
        color: #014F80 !important;
        background: #fff;
    }
    
    @media screen and (min-width: 769px) {
        .btn-reverse:hover {
            color: #fff !important;
            border: 2px solid #014F80;
            background: #014F80;
        }
    }
    
    .btn-sub {
        color: #fff !important;
        border: 2px solid #333333;
        background: #333333;
    }
    
    @media screen and (min-width: 769px) {
        .btn-sub:hover {
            color: #333333 !important;
            border: 2px solid #333333;
            background: #fff;
        }
    }
    
    .btn-sub-reverse {
        color: #333333 !important;
        border: 2px solid #333333;
        background: #fff;
    }
    
    @media screen and (min-width: 769px) {
        .btn-sub-reverse:hover {
            color: #fff !important;
            border: 2px solid #333333;
            background: #333333;
        }
    }
    
    .btn-arr {
        position: relative;
        padding-right: 60px;
    }
    
    .btn-arr:after {
        content: url(../img/arr-w.svg);
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -20px;
        font-size: 20px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }
    
    @media screen and (min-width: 769px) {
        .btn-arr:hover:after {
            right: 10px;
            content: url(../img/arr.svg);
        }
    }
    
    .btn-arr-reverse {
        position: relative;
        padding-right: 60px;
    }
    
    .btn-arr-reverse:after {
        content: url(../img/arr.svg);
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -20px;
        font-size: 20px;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
    }
    
    @media screen and (min-width: 769px) {
        .btn-arr-reverse:hover:after {
            right: 10px;
            content: url(../img/arr-w.svg);
        }
    }
    
    .btn-radius {
        -moz-border-radius: 35px;
        -webkit-border-radius: 35px;
        border-radius: 35px;
    }
    
    .dl-list5 {
        overflow: hidden;
    }
    
    .dl-list5 dt {
        float: left;
        width: 5em;
        padding: 15px 0 0;
    }
    
    .dl-list5 dd {
        padding: 15px 0 15px 5em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list5 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list5 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list5 dd {
            padding: 5px 0 15px;
        }
    }
    
    .dl-list6 {
        overflow: hidden;
    }
    
    .dl-list6 dt {
        float: left;
        width: 6em;
        padding: 15px 0 0;
    }
    
    .dl-list6 dd {
        padding: 15px 0 15px 6em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list6 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list6 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list6 dd {
            padding: 5px 0 15px;
        }
    }
    
    .dl-list7 {
        overflow: hidden;
    }
    
    .dl-list7 dt {
        float: left;
        width: 7em;
        padding: 15px 0 0;
    }
    
    .dl-list7 dd {
        padding: 15px 0 15px 7em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list7 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list7 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list7 dd {
            padding: 5px 0 15px;
        }
    }
    
    .dl-list8 {
        overflow: hidden;
    }
    
    .dl-list8 dt {
        float: left;
        width: 8em;
        padding: 15px 0 0;
    }
    
    .dl-list8 dd {
        padding: 15px 0 15px 8em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list8 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list8 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list8 dd {
            padding: 5px 0 15px;
        }
    }
    
    .dl-list9 {
        overflow: hidden;
    }
    
    .dl-list9 dt {
        float: left;
        width: 9em;
        padding: 15px 0 0;
    }
    
    .dl-list9 dd {
        padding: 15px 0 15px 9em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list9 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list9 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list9 dd {
            padding: 5px 0 15px;
        }
    }
    
    .dl-list10 {
        overflow: hidden;
    }
    
    .dl-list10 dt {
        float: left;
        width: 10em;
        padding: 15px 0 0;
    }
    
    .dl-list10 dd {
        padding: 15px 0 15px 10em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list10 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list10 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list10 dd {
            padding: 5px 0 15px;
        }
    }
    
    .dl-list11 {
        overflow: hidden;
    }
    
    .dl-list11 dt {
        float: left;
        width: 11em;
        padding: 15px 0 0;
    }
    
    .dl-list11 dd {
        padding: 15px 0 15px 11em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list11 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list11 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list11 dd {
            padding: 5px 0 15px;
        }
    }
    
    .dl-list12 {
        overflow: hidden;
    }
    
    .dl-list12 dt {
        float: left;
        width: 12em;
        padding: 15px 0 0;
    }
    
    .dl-list12 dd {
        padding: 15px 0 15px 12em;
        border-bottom: 1px solid #c8c8c8;
    }
    
    .dl-list12 dd:after {
        content: ".";
        display: block;
        visibility: hidden;
        height: 0.1px;
        font-size: 0.1em;
        line-height: 0;
        clear: both;
    }
    
    @media screen and (max-width: 640px) {
        .dl-list12 dt {
            float: none;
            width: auto;
            font-weight: bold;
        }
        .dl-list12 dd {
            padding: 5px 0 15px;
        }
    }
    
    .row {
        margin: 0 -10px;
        letter-spacing: -0.5em;
        overflow: hidden;
    }
    
    .row .col {
        display: inline-block;
        vertical-align: top;
        margin: 0 0 20px;
        padding: 0 10px;
        letter-spacing: normal;
    }
    
    .col2 .col {
        width: 50%;
    }
    
    .col3 .col {
        width: 33.333%;
    }
    
    .col4 .col {
        width: 25%;
    }
    
    .col5 .col {
        width: 20%;
    }
    
    .col6 .col {
        width: 16.666%;
    }
    
    .gap0 {
        margin: 0;
    }
    
    .gap0 .col {
        margin: 0;
        padding: 0;
    }
    
    .gap5 {
        margin: 0 -5px;
    }
    
    .gap5 .col {
        margin: 0 0 10px;
        padding: 0 5px;
    }
    
    .gap10 {
        margin: 0 -10px;
    }
    
    .gap10 .col {
        margin: 0 0 20px;
        padding: 0 10px;
    }
    
    .gap15 {
        margin: 0 -15px;
    }
    
    .gap15 .col {
        margin: 0 0 30px;
        padding: 0 15px;
    }
    
    .gap20 {
        margin: 0 -20px;
    }
    
    .gap20 .col {
        margin: 0 0 40px;
        padding: 0 20px;
    }
    
    .gap25 {
        margin: 0 -25px;
    }
    
    .gap25 .col {
        margin: 0 0 50px;
        padding: 0 25px;
    }
    
    .gap30 {
        margin: 0 -30px;
    }
    
    .gap30 .col {
        margin: 0 0 60px;
        padding: 0 30px;
    }
    
    @media screen and (max-width: 768px) {
        .col1tb .col {
            width: 100%;
        }
        .col2tb .col {
            width: 50%;
        }
        .col3tb .col {
            width: 33.333%;
        }
        .col4tb .col {
            width: 25%;
        }
        .col5tb .col {
            width: 20%;
        }
        .col6tb .col {
            width: 16.666%;
        }
        .gap0tb {
            margin: 0;
        }
        .gap0tb .col {
            margin: 0;
            padding: 0;
        }
        .gap5tb {
            margin: 0 -5px;
        }
        .gap5tb .col {
            margin: 0 0 10px;
            padding: 0 5px;
        }
        .gap10tb {
            margin: 0 -10px;
        }
        .gap10tb .col {
            margin: 0 0 20px;
            padding: 0 10px;
        }
        .gap15tb {
            margin: 0 -15px;
        }
        .gap15tb .col {
            margin: 0 0 30px;
            padding: 0 15px;
        }
        .gap20tb {
            margin: 0 -20px;
        }
        .gap20tb .col {
            margin: 0 0 40px;
            padding: 0 20px;
        }
        .gap25tb {
            margin: 0 -25px;
        }
        .gap25tb .col {
            margin: 0 0 50px;
            padding: 0 25px;
        }
        .gap30tb {
            margin: 0 -30px;
        }
        .gap30tb .col {
            margin: 0 0 60px;
            padding: 0 30px;
        }
    }
    
    @media screen and (max-width: 640px) {
        .col1sp .col {
            width: 100%;
        }
        .col2sp .col {
            width: 50%;
        }
        .col3sp .col {
            width: 33.333%;
        }
        .col4sp .col {
            width: 25%;
        }
        .col5sp .col {
            width: 20%;
        }
        .col6sp .col {
            width: 16.666%;
        }
        .gap0sp {
            margin: 0;
        }
        .gap0sp .col {
            margin: 0;
            padding: 0;
        }
        .gap5sp {
            margin: 0 -5px;
        }
        .gap5sp .col {
            margin: 0 0 10px;
            padding: 0 5px;
        }
        .gap10sp {
            margin: 0 -10px;
        }
        .gap10sp .col {
            margin: 0 0 20px;
            padding: 0 10px;
        }
        .gap15sp {
            margin: 0 -15px;
        }
        .gap15sp .col {
            margin: 0 0 30px;
            padding: 0 15px;
        }
        .gap20sp {
            margin: 0 -20px;
        }
        .gap20sp .col {
            margin: 0 0 40px;
            padding: 0 20px;
        }
        .gap25sp {
            margin: 0 -25px;
        }
        .gap25sp .col {
            margin: 0 0 50px;
            padding: 0 25px;
        }
        .gap30sp {
            margin: 0 -30px;
        }
        .gap30sp .col {
            margin: 0 0 60px;
            padding: 0 30px;
        }
    }
    
    .m0 {
        margin: 0px !important;
    }
    
    .m5 {
        margin: 5px !important;
    }
    
    .m10 {
        margin: 10px !important;
    }
    
    .m15 {
        margin: 15px !important;
    }
    
    .m20 {
        margin: 20px !important;
    }
    
    .m25 {
        margin: 25px !important;
    }
    
    .m30 {
        margin: 30px !important;
    }
    
    .m35 {
        margin: 35px !important;
    }
    
    .m40 {
        margin: 40px !important;
    }
    
    .m45 {
        margin: 45px !important;
    }
    
    .m50 {
        margin: 50px !important;
    }
    
    .mt0 {
        margin-top: 0px !important;
    }
    
    .mt1 {
        margin-top: 1px !important;
    }
    
    .mt2 {
        margin-top: 2px !important;
    }
    
    .mt3 {
        margin-top: 3px !important;
    }
    
    .mt4 {
        margin-top: 4px !important;
    }
    
    .mt5 {
        margin-top: 5px !important;
    }
    
    .mt6 {
        margin-top: 6px !important;
    }
    
    .mt7 {
        margin-top: 7px !important;
    }
    
    .mt8 {
        margin-top: 8px !important;
    }
    
    .mt9 {
        margin-top: 9px !important;
    }
    
    .mt10 {
        margin-top: 10px !important;
    }
    
    .mt15 {
        margin-top: 15px !important;
    }
    
    .mt20 {
        margin-top: 20px !important;
    }
    
    .mt25 {
        margin-top: 25px !important;
    }
    
    .mt30 {
        margin-top: 30px !important;
    }
    
    .mt35 {
        margin-top: 35px !important;
    }
    
    .mt40 {
        margin-top: 40px !important;
    }
    
    .mt45 {
        margin-top: 45px !important;
    }
    
    .mt50 {
        margin-top: 50px !important;
    }
    
    .mt55 {
        margin-top: 55px !important;
    }
    
    .mt60 {
        margin-top: 60px !important;
    }
    
    .mr0 {
        margin-right: 0px !important;
    }
    
    .mr1 {
        margin-right: 1px !important;
    }
    
    .mr2 {
        margin-right: 2px !important;
    }
    
    .mr3 {
        margin-right: 3px !important;
    }
    
    .mr4 {
        margin-right: 4px !important;
    }
    
    .mr5 {
        margin-right: 5px !important;
    }
    
    .mr6 {
        margin-right: 6px !important;
    }
    
    .mr7 {
        margin-right: 7px !important;
    }
    
    .mr8 {
        margin-right: 8px !important;
    }
    
    .mr9 {
        margin-right: 9px !important;
    }
    
    .mr10 {
        margin-right: 10px !important;
    }
    
    .mr15 {
        margin-right: 15px !important;
    }
    
    .mr20 {
        margin-right: 20px !important;
    }
    
    .mr25 {
        margin-right: 25px !important;
    }
    
    .mr30 {
        margin-right: 30px !important;
    }
    
    .mr35 {
        margin-right: 35px !important;
    }
    
    .mr40 {
        margin-right: 40px !important;
    }
    
    .mr45 {
        margin-right: 45px !important;
    }
    
    .mr50 {
        margin-right: 50px !important;
    }
    
    .mr55 {
        margin-right: 55px !important;
    }
    
    .mr60 {
        margin-right: 60px !important;
    }
    
    .mb0 {
        margin-bottom: 0px !important;
    }
    
    .mb1 {
        margin-bottom: 1px !important;
    }
    
    .mb2 {
        margin-bottom: 2px !important;
    }
    
    .mb3 {
        margin-bottom: 3px !important;
    }
    
    .mb4 {
        margin-bottom: 4px !important;
    }
    
    .mb5 {
        margin-bottom: 5px !important;
    }
    
    .mb6 {
        margin-bottom: 6px !important;
    }
    
    .mb7 {
        margin-bottom: 7px !important;
    }
    
    .mb8 {
        margin-bottom: 8px !important;
    }
    
    .mb9 {
        margin-bottom: 9px !important;
    }
    
    .mb10 {
        margin-bottom: 10px !important;
    }
    
    .mb15 {
        margin-bottom: 15px !important;
    }
    
    .mb20 {
        margin-bottom: 20px !important;
    }
    
    .mb25 {
        margin-bottom: 25px !important;
    }
    
    .mb30 {
        margin-bottom: 30px !important;
    }
    
    .mb35 {
        margin-bottom: 35px !important;
    }
    
    .mb40 {
        margin-bottom: 40px !important;
    }
    
    .mb45 {
        margin-bottom: 45px !important;
    }
    
    .mb50 {
        margin-bottom: 50px !important;
    }
    
    .mb55 {
        margin-bottom: 55px !important;
    }
    
    .mb60 {
        margin-bottom: 60px !important;
    }
    
    .ml0 {
        margin-left: 0px !important;
    }
    
    .ml1 {
        margin-left: 1px !important;
    }
    
    .ml2 {
        margin-left: 2px !important;
    }
    
    .ml3 {
        margin-left: 3px !important;
    }
    
    .ml4 {
        margin-left: 4px !important;
    }
    
    .ml5 {
        margin-left: 5px !important;
    }
    
    .ml10 {
        margin-left: 10px !important;
    }
    
    .ml11 {
        margin-left: 11px !important;
    }
    
    .ml12 {
        margin-left: 12px !important;
    }
    
    .ml13 {
        margin-left: 13px !important;
    }
    
    .ml14 {
        margin-left: 14px !important;
    }
    
    .ml15 {
        margin-left: 15px !important;
    }
    
    .ml20 {
        margin-left: 20px !important;
    }
    
    .ml25 {
        margin-left: 25px !important;
    }
    
    .ml30 {
        margin-left: 30px !important;
    }
    
    .ml35 {
        margin-left: 35px !important;
    }
    
    .ml40 {
        margin-left: 40px !important;
    }
    
    .ml45 {
        margin-left: 45px !important;
    }
    
    .ml50 {
        margin-left: 50px !important;
    }
    
    .ml55 {
        margin-left: 55px !important;
    }
    
    .ml60 {
        margin-left: 60px !important;
    }
    
    .p0 {
        padding: 0px !important;
    }
    
    .p5 {
        padding: 5px !important;
    }
    
    .p10 {
        padding: 10px !important;
    }
    
    .p15 {
        padding: 15px !important;
    }
    
    .p20 {
        padding: 20px !important;
    }
    
    .p25 {
        padding: 25px !important;
    }
    
    .p30 {
        padding: 30px !important;
    }
    
    .p35 {
        padding: 35px !important;
    }
    
    .p40 {
        padding: 40px !important;
    }
    
    .p45 {
        padding: 45px !important;
    }
    
    .p50 {
        padding: 50px !important;
    }
    
    .pt0 {
        padding-top: 0px !important;
    }
    
    .pt1 {
        padding-top: 1px !important;
    }
    
    .pt2 {
        padding-top: 2px !important;
    }
    
    .pt3 {
        padding-top: 3px !important;
    }
    
    .pt4 {
        padding-top: 4px !important;
    }
    
    .pt5 {
        padding-top: 5px !important;
    }
    
    .pt10 {
        padding-top: 10px !important;
    }
    
    .pt15 {
        padding-top: 15px !important;
    }
    
    .pt20 {
        padding-top: 20px !important;
    }
    
    .pt25 {
        padding-top: 25px !important;
    }
    
    .pt30 {
        padding-top: 30px !important;
    }
    
    .pt35 {
        padding-top: 35px !important;
    }
    
    .pt40 {
        padding-top: 40px !important;
    }
    
    .pt45 {
        padding-top: 45px !important;
    }
    
    .pt50 {
        padding-top: 50px !important;
    }
    
    .pr0 {
        padding-right: 0px !important;
    }
    
    .pr5 {
        padding-right: 5px !important;
    }
    
    .pr10 {
        padding-right: 10px !important;
    }
    
    .pr15 {
        padding-right: 15px !important;
    }
    
    .pr20 {
        padding-right: 20px !important;
    }
    
    .pr25 {
        padding-right: 25px !important;
    }
    
    .pr30 {
        padding-right: 30px !important;
    }
    
    .pr35 {
        padding-right: 35px !important;
    }
    
    .pr40 {
        padding-right: 40px !important;
    }
    
    .pr45 {
        padding-right: 45px !important;
    }
    
    .pr50 {
        padding-right: 50px !important;
    }
    
    .pb0 {
        padding-bottom: 0px !important;
    }
    
    .pb5 {
        padding-bottom: 5px !important;
    }
    
    .pb10 {
        padding-bottom: 10px !important;
    }
    
    .pb15 {
        padding-bottom: 15px !important;
    }
    
    .pb20 {
        padding-bottom: 20px !important;
    }
    
    .pb25 {
        padding-bottom: 25px !important;
    }
    
    .pb30 {
        padding-bottom: 30px !important;
    }
    
    .pb35 {
        padding-bottom: 35px !important;
    }
    
    .pb40 {
        padding-bottom: 40px !important;
    }
    
    .pb45 {
        padding-bottom: 45px !important;
    }
    
    .pb50 {
        padding-bottom: 50px !important;
    }
    
    .pl0 {
        padding-left: 0px !important;
    }
    
    .pl5 {
        padding-left: 5px !important;
    }
    
    .pl10 {
        padding-left: 10px !important;
    }
    
    .pl12 {
        padding-left: 12px !important;
    }
    
    .pl15 {
        padding-left: 15px !important;
    }
    
    .pl20 {
        padding-left: 20px !important;
    }
    
    .pl25 {
        padding-left: 25px !important;
    }
    
    .pl30 {
        padding-left: 30px !important;
    }
    
    .pl35 {
        padding-left: 35px !important;
    }
    
    .pl40 {
        padding-left: 40px !important;
    }
    
    .pl45 {
        padding-left: 45px !important;
    }
    
    .pl50 {
        padding-left: 50px !important;
    }
    /*********************************
 * common
 *********************************/
    
    html {
        font-size: 62.5%;
    }
    
    body {
        margin: 0;
        padding: 0;
        font-size: clamp(1.4rem, 1.6vw, 1.6rem);
        font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "メイリオ", Meiryo, sans-serif;
        line-height: 1.571;
        color: #333333;
        background: #ffffff;
        -webkit-text-size-adjust: 100%;
    }
    
    a,
    a:visited,
    a:active {
        color: #014F80;
        text-decoration: underline;
    }
    
    a:hover {
        color: #333333;
        text-decoration: none;
    }
    
    .inner {
        position: relative;
        width: 780px;
        margin: 0 auto;
    }
    
    @media screen and (max-width: 780px) {
        .inner {
            width: auto;
            padding: 0;
        }
    }
    
    figure {
        text-align: center;
    }
    
    figure figcaption {
        margin: 5px 0 0;
        font-size: clamp(1rem, 1.2vw, 1.2rem);
        text-align: left;
    }
    
    .youtube {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
    }
    
    .youtube iframe {
        position: absolute;
        top: 0;
        right: 0;
        width: 100% !important;
        height: 100% !important;
    }
    /*********************************
 * a
 *********************************/
    
    header {
        padding: 10px;
        background: #fff;
    }
    
    header img {
        width: 30%;
    }
    
    footer {
        margin-top: 10px;
        padding: 30px 10px 300px;
        background: #fff;
        text-align: center;
    }
    
    @media screen and (max-width: 640px) {
        footer {
            padding: 10px 10px 50px;
        }
    }
    
    footer .footer-txt {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0;
    }
    
    footer .footer-txt a {
        color: #333333;
    }
    
    @media screen and (max-width: 780px) {
        footer .footer-txt {
            font-size: 14px;
        }
    }
    
    footer img {
        width: 15%;
    }
    
    @media screen and (max-width: 780px) {
        footer img {
            width: 80%;
        }
    }
    
    .main {
        text-align: center;
        /*    @media screen and ( max-width: 780px ) {
        img {
            width: 80%;
            margin: 0 auto;
        }
    }*/
    }
    
    .tap-btn {
        padding: 0 25px;
    }
    
    .txt {
        margin-bottom: 100px;
        text-align: center;
    }
    
    @media screen and (max-width: 780px) {
        .txt {
            padding: 0 20px;
            margin-bottom: 50px;
        }
    }
    
    .step {
        padding-bottom: 20px;
    }
    
    .free {
        background: #fff;
        padding: 50px 10px 10px;
    }
    
    .free .free-box {
        padding: 20px;
        margin: 0 auto;
        border: 1px solid #c01212;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background: #c01212;
        color: #c01212;
        max-width: 780px;
    }
    
    .free .free-box .time {
        border: 2px solid #000;
        background: #fff;
        padding: 15px;
        margin-top: 5px;
        font-size: 18px;
        font-weight: bold;
        color: #000;
        text-align: center;
    }
    
    @media screen and (min-width: 781px) {
        .free .free-box .time {
            font-size: 36px;
        }
    }
    
    .free .free-box .time #nowdate1,
    .free .free-box .time #nowdate2 {
        color: #c01212;
        font-weight: bold;
        display: inline-block;
    }
    
    @media screen and (max-width: 780px) {
        .free .free-box img {
            width: 50%;
        }
    }
    
    .free .price {
        max-width: 780px;
        margin: 0 auto 50px;
        background: #ffffee;
        padding: 20px 20px 30px;
        border: 3px solid #c01212;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    
    .features {
        padding-top: 20px;
    }
    
    .note {
        padding: 10px 0 20px;
    }
    
    .faq {
        padding-bottom: 10px;
    }
    
#followButton {
  position: fixed;
  bottom: 10px;
  width: 100%;
  text-align: center;
  visibility: hidden; /* 初期状態では非表示 */
  opacity: 0; /* 初期状態で透明 */
  transform: translateY(20px); /* 初期状態で少し下に配置 */
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; /* アニメーションのタイミングを設定 */
}

#followButton.visible {
  visibility: visible; /* 表示状態にする */
  opacity: 1; /* フェードイン */
  transform: translateY(0); /* 元の位置に戻す */
  transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0s; /* visibility を変更するタイミングを即時に */
}
    
    #followButton.hidden {
        display: none;
    }
    
    /*********************************
 * popup
 *********************************/
    
    .popup-area {
        display: none;
        padding: 0;
        position: fixed;
        z-index: 9999;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        text-align: center;
        border-radius: 0;
        width: 80%;
    }
    
    .popup-area a:hover img {
        opacity: 1;
    }
    
    .popup-area .popwrap {
        position: relative;
        z-index: 20000;
    }
    /*@media screen and (max-width: 980px) {
	.popup-area {
        width:100%
    }
}
@media screen and (min-width: 979px) {
	.popup-area {
        width:auto;
        max-width: 50vw;
    }
}*/
    
    .cover-eml {
        background: rgba(0, 0, 0, 0.6);
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    .popup-area .close-btn {
        position: absolute;
        top: -30px;
        right: 0;
        z-index: 30000;
        margin: 0 0 15px auto;
        cursor: pointer;
        color: #fff;
        font-size: 30px;
        line-height: 1;
    }
    /* カスタム */
    /* .btn__top {
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    padding: 5px 30px;
    font-weight: bold;
    background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
    border-radius: 10px;
    color: #000000;
    border: 1px solid #e6e6e6;
    text-shadow: 0 1px #fff;
    transition: 0.5s;
    display: flex;
    align-items: center;
    margin-left: 20px;
    font-size: 16px;
    letter-spacing: 2px;
}

.btn__top:hover {
    opacity: 0.5;
}
*/
    
    .header-custom {
        display: flex;
        align-items: center;
    }
    
    a.btn__top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        text-decoration: none;
        width: 120px;
        margin-left: 10px;
        padding: 1rem 2rem;
        font-weight: bold;
        background: #eee;
        color: #38b6ff;
        border-radius: 100vh;
        position: relative;
        transition: 0.5s;
        height: 40px;
    }
    
    a.btn__top::before {
        content: '';
        position: absolute;
        top: calc(50% - 2px);
        right: 13px;
        transform: translateY(calc(-50% - 2px)) rotate(45deg);
        width: 11px;
        height: 1px;
        background: #38b6ff;
    }
    
    a.btn__top::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 1em;
        transform: translateY(-50%);
        width: 30px;
        height: 1px;
        background-color: #38b6ff;
    }
    
    a.btn__top:hover {
        background: #d4eef7;
        color: #38b6ff;
    }
    
    .service-explain {
        /* background-color: #38b6ff; */
        /* padding: 0 20px;
    max-width: 740px;
    margin: auto; */
        max-width: 780px;
        padding: 0 2.6%;
    }
    
    .service-explain-in {
        padding: 0 20px;
        max-width: 740px;
        margin: auto;
        background-color: #ffffff;
    }
    
    .service-explain-box {
        position: relative;
        background-color: #D2ECF9;
        width: 93%;
        margin: auto;
        padding: 230px 20px 50px 20px;
    }
    /* .service-explain-text {
    margin-top: 160px;
} */
    
    .service-explain-text h2 {
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 60px;
    }
    
    .service-explain-text p {
        font-size: 14px;
        margin-top: 20px;
    }
    
    .service-explain-text h3 {
        font-size: 24px;
        text-align: center;
        font-weight: bold;
        text-shadow: 1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
    }
    /* HTML: <div class="ribbon">Your text content</div> */
    
    .ribbon {
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        padding: 15px 25px;
        /* text-align: center; */
    }
    
    .ribbon {
        --d: .8em;
        /* the depth */
        position: absolute;
        top: 20px;
        inset-inline: calc(-1*var(--d));
        border-bottom: var(--d) solid #0008;
        line-height: 1.8;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, calc(100% - var(--d)) calc(100% - var(--d)), var(--d) calc(100% - var(--d)), var(--d) 100%, 0 calc(100% - var(--d)));
        background: linear-gradient(90deg, #1D262E 0%, #063761 50%, #1D262E 100%);
        /* the main color */
    }
    
    .box-box {
        display: flex;
        justify-content: space-around;
        margin-top: 80px;
        align-items: center;
    }
    
    .box-box img {
        width: 30%;
    }
    
    .box16 {
        padding: 1em 1em;
        margin: 2em 0;
        background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
        background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
    }
    
    .box16 p {
        margin: 0;
        padding: 0;
        font-size: 14px;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
    }
    
    .balloon-005 {
        display: flex;
        justify-content: center;
        position: relative;
        max-width: 300px;
        padding: 1.2em 1em;
        border: 3px solid #2589d0;
        border-radius: 5px;
        /* background: #edfeff; */
        background-image: radial-gradient(#1981f7 20%, transparent 0), radial-gradient(#1981f7 20%, transparent 0);
        background-position: 0 0, 10px 10px;
        background-size: 10px 10px;
        color: #333333;
        text-shadow: 2px 3px 3px rgba(0, 0, 0, 0.4);
        font-weight: bold;
        margin: auto;
        margin-bottom: 15px;
        font-size: 18px;
    }
    
    .balloon-005::before,
    .balloon-005::after {
        position: absolute;
        bottom: -15px;
        width: 30px;
        height: 15px;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: '';
    }
    
    .balloon-005::before {
        background-color: #2589d0;
    }
    
    .balloon-005::after {
        bottom: -11px;
        background-color: #fff;
    }
    
    @media screen and (max-width: 600px) {
        /* 959px以下に適用されるCSS（タブレット用） */
    }
    
    @media screen and (max-width: 450px) {
        .box-box {
            margin-top: 40px;
            text-align: center;
            display: block;
        }
        .service-explain-text h2 {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 30px;
        }
        .service-explain-box {
            position: relative;
            background-color: #D2ECF9;
            width: 100%;
            margin: auto;
            padding: 240px 10px 50px 10px;
        }
        .box16 {
            padding: 1em 1em;
            margin: 1em 0;
            background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
            background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px, #e9f4ff 3px, #e9f4ff 7px);
        }
        .ribbon {
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            padding: 15px;
            /* text-align: center; */
        }
        .service-explain-text h3 {
            font-size: 20px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #ffffff, -1px 1px 0 #ffffff, 1px -1px 0 #ffffff, -1px -1px 0 #ffffff;
        }
        .box-box img {
            width: 50%;
            margin-top: 20px;
        }
    }
    /* 新規 */
    
    .adjust01 {
        margin-top: -40px;
    }
    
    .back01 {
        background-image: url(../../img/back1.png);
        padding-top: 80px;
        padding-bottom: 20px;
        margin-top: -90px;
    }
    
    .back02 {
        background-image: url(../../img/back2.png);
        padding-top: 30px;
        padding-bottom: 20px;
        background-size: cover;
    }
    
    .heading01 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        text-align: center;
        color: #ffffff;
        font-weight: bold;
    }
    
    .time-text {
        font-size: 22px;
        color: #ffffff;
        text-align: center;
        font-weight: bold;
        display: block;
    }
    
    @media screen and (max-width: 450px) {
        /* 959px以下に適用されるCSS（タブレット用） */
        .heading01 {
            font-size: 14px;
        }
        .time-text {
            font-size: 14px;
        }
    }
    
    .heading01::before,
    .heading01::after {
        content: '';
        width: 2px;
        height: 40px;
        background-color: #ffffff;
        margin-top: -20px;
    }
    
    .heading01::before {
        margin-right: 20px;
        transform: rotate(-35deg)
    }
    
    .heading01::after {
        margin-left: 20px;
        transform: rotate(35deg)
    }
    
    .tap-box {
        background-color: #ffffff;
        border-radius: 5px;
        padding: 5px 5px 15px 5px;
        text-align: center;
    }
    
    .tap-box img {
        margin-top: -10px;
    }
    
    .tap-btn-cover {
        padding: 10px 18px 18px 20px;
    }